<route lang="yaml">
  meta:
    title: 监测详情
</route>

<script setup>
import axios from 'axios'
import * as echarts from 'echarts'
import { computed, ref } from 'vue'

const dataBlocks = ref()
const route = useRoute()
const device = JSON.parse(route.query.data) // 解析 JSON 字符串为对象
// 筛选结果数组
const filteredMonitorTypes = ref([])

// 下拉框选中的监测类型
const selectedMonitorType = ref('')
async function fetchData() {
  console.log('deviceID', device.deviceID)
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/hik/business/queryDeviceToSensorMonitorList', {
      deviceID: '1079466678907109377',
      startTime: '2024-12-30T00:00:00.000+08:00',
      endTime: '2024-12-30T23:59:59.000+08:00',
      pageNum: 1,
      pageSize: 20,
    })
    if (response.data) {
      console.log('监测详情页面：', response.data.data.historyMonitor.historyMonitorDataList)
      // Object.assign(dataBlocks, response.data.data.historyMonitor.historyMonitorDataList)
      dataBlocks.value = response.data.data.historyMonitor.historyMonitorDataList
      console.log('dataBlocks', dataBlocks)
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
  }
}

async function fetchSensorData() {
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/hik/business/querySensorToDeviceIdList', {
      deviceID: device.deviceID,
      pageNum: 1,
      pageSize: 20,
    })
    if (response.data) {
      console.log('传感器：', response.data.data.rows)
      filteredMonitorTypes.value = response.data.data.rows
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
  }
}
async function fetchGraphData() {
  console.log('deviceID', device.deviceID)
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/hik/business/queryDeviceToSensorHistoryMonitorList', {
      deviceID: '1082692019339612160',
      startTime: '2025-3-24T00:00:00.000+08:00',
      endTime: '2025-3-24T23:59:59.000+08:00',
      pageNum: 1,
      pageSize: 10,
    })
    if (response.data) {
      console.log('折线图页面：', response.data)
      // Object.assign(dataBlocks, response.data.data.historyMonitor.historyMonitorDataList)
      dataBlocks.value = response.data.data.historyMonitor.historyMonitorDataList
      console.log('dataBlocks', dataBlocks)
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
  }
}
// 当前选中的日期
const selectedDate = ref('')

// 近一周的日期数组
const weekDates = ref([])

// 生成近一周的日期
function generateWeekDates() {
  console.log('device', device)
  const today = new Date()
  for (let i = 6; i >= 0; i--) {
    const date = new Date(today)
    date.setDate(today.getDate() - i)
    weekDates.value.push(
      `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
        date.getDate(),
      ).padStart(2, '0')}`,
    )
  }
  selectedDate.value = weekDates.value[6] // 默认选中今天
}

// 折线图初始化
function initChart() {
  console.log('graphData', graphData.value)
  // 获取时间和湿度值
  const times = graphData.value.map(item => new Date(item.monitorTime).toLocaleTimeString())
  const values = graphData.value.map(item => Number.parseFloat(item.monitorValue))

  // 初始化 ECharts 实例
  const chartDom = document.getElementById('chart')
  const chartInstance = echarts.init(chartDom)

  // 配置项
  const option = {
    title: {
      text: '湿度监测数据',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: times,
      name: '时间',
    },
    yAxis: {
      type: 'value',
      name: '湿度',
    },
    series: [
      {
        name: '湿度值',
        type: 'line',
        data: values,
        smooth: true, // 平滑曲线
      },
    ],
  }

  // 渲染图表
  chartInstance.setOption(option)

  // 窗口大小变化时自适应
  window.addEventListener('resize', chartInstance.resize)
}

// 折线图初始化
function initChart1(data) {
  const times = data.map(item => new Date(item.monitorTime).toLocaleTimeString())
  const values = data.map(item => Number.parseFloat(item.monitorValue))

  const chartDom = document.getElementById('chart')
  const chartInstance = echarts.init(chartDom)

  const option = {
    title: {
      text: `传感器数据 (${selectedSensor.value})`,
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: times,
      name: '时间',
    },
    yAxis: {
      type: 'value',
      name: '监测值',
    },
    series: [
      {
        name: '监测值',
        type: 'line',
        data: values,
        smooth: true,
      },
    ],
  }

  chartInstance.setOption(option)
  window.addEventListener('resize', chartInstance.resize)
}
// 仿真传感器名称
const sensors = [
  '重庆医科大生物工程学院办公室1楼1-1_A相电流探测器',
  '重庆医科大生物工程学院办公室1楼1-1_C相电压探测器',
  '重庆医科大生物工程学院办公室1楼1-1_B相电压探测器',
  '重庆医科大生物工程学院办公室1楼1-1_A相电压探测器',
  '重庆医科大生物工程学院办公室1楼1-1_故障电弧探测器',
  '重庆医科大生物工程学院办公室1楼1-1电气温度传感器',
]

// 当前选中的传感器
const selectedSensor = ref(sensors[0])

const simulatedData = {
  '重庆医科大生物工程学院办公室1楼1-1_A相电流探测器': [
    { monitorTime: '2024-12-29T00:00:00+08:00', monitorValue: '5.00' },
    { monitorTime: '2024-12-29T01:00:00+08:00', monitorValue: '5.10' },
    { monitorTime: '2024-12-29T02:00:00+08:00', monitorValue: '4.90' },
    { monitorTime: '2024-12-29T03:00:00+08:00', monitorValue: '5.00' },
    { monitorTime: '2024-12-29T04:00:00+08:00', monitorValue: '5.20' },
    { monitorTime: '2024-12-29T05:00:00+08:00', monitorValue: '4.80' },
    { monitorTime: '2024-12-29T06:00:00+08:00', monitorValue: '5.00' },
    { monitorTime: '2024-12-29T07:00:00+08:00', monitorValue: '5.10' },
    { monitorTime: '2024-12-29T08:00:00+08:00', monitorValue: '5.00' },
    { monitorTime: '2024-12-29T09:00:00+08:00', monitorValue: '4.95' },
    { monitorTime: '2024-12-29T10:00:00+08:00', monitorValue: '5.05' },
    { monitorTime: '2024-12-29T11:00:00+08:00', monitorValue: '5.00' },
    { monitorTime: '2024-12-29T12:00:00+08:00', monitorValue: '5.10' },
  ],
  '重庆医科大生物工程学院办公室1楼1-1_C相电压探测器': [
    { monitorTime: '2024-12-29T00:00:00+08:00', monitorValue: '220.00' },
    { monitorTime: '2024-12-29T01:00:00+08:00', monitorValue: '220.10' },
    { monitorTime: '2024-12-29T02:00:00+08:00', monitorValue: '219.90' },
    { monitorTime: '2024-12-29T03:00:00+08:00', monitorValue: '220.05' },
    { monitorTime: '2024-12-29T04:00:00+08:00', monitorValue: '220.20' },
    { monitorTime: '2024-12-29T05:00:00+08:00', monitorValue: '219.80' },
    { monitorTime: '2024-12-29T06:00:00+08:00', monitorValue: '220.00' },
    { monitorTime: '2024-12-29T07:00:00+08:00', monitorValue: '220.15' },
    { monitorTime: '2024-12-29T08:00:00+08:00', monitorValue: '220.00' },
    { monitorTime: '2024-12-29T09:00:00+08:00', monitorValue: '219.95' },
    { monitorTime: '2024-12-29T10:00:00+08:00', monitorValue: '220.05' },
    { monitorTime: '2024-12-29T11:00:00+08:00', monitorValue: '220.00' },
    { monitorTime: '2024-12-29T12:00:00+08:00', monitorValue: '220.10' },
  ],
  '重庆医科大生物工程学院办公室1楼1-1_B相电压探测器': [
    { monitorTime: '2024-12-29T00:00:00+08:00', monitorValue: '219.80' },
    { monitorTime: '2024-12-29T01:00:00+08:00', monitorValue: '219.90' },
    { monitorTime: '2024-12-29T02:00:00+08:00', monitorValue: '219.70' },
    { monitorTime: '2024-12-29T03:00:00+08:00', monitorValue: '219.85' },
    { monitorTime: '2024-12-29T04:00:00+08:00', monitorValue: '219.95' },
    { monitorTime: '2024-12-29T05:00:00+08:00', monitorValue: '219.60' },
    { monitorTime: '2024-12-29T06:00:00+08:00', monitorValue: '219.80' },
    { monitorTime: '2024-12-29T07:00:00+08:00', monitorValue: '219.90' },
    { monitorTime: '2024-12-29T08:00:00+08:00', monitorValue: '219.85' },
    { monitorTime: '2024-12-29T09:00:00+08:00', monitorValue: '219.75' },
    { monitorTime: '2024-12-29T10:00:00+08:00', monitorValue: '219.80' },
    { monitorTime: '2024-12-29T11:00:00+08:00', monitorValue: '219.90' },
    { monitorTime: '2024-12-29T12:00:00+08:00', monitorValue: '219.95' },
  ],
  '重庆医科大生物工程学院办公室1楼1-1_A相电压探测器': [
    { monitorTime: '2024-12-29T00:00:00+08:00', monitorValue: '220.50' },
    { monitorTime: '2024-12-29T01:00:00+08:00', monitorValue: '220.40' },
    { monitorTime: '2024-12-29T02:00:00+08:00', monitorValue: '220.60' },
    { monitorTime: '2024-12-29T03:00:00+08:00', monitorValue: '220.45' },
    { monitorTime: '2024-12-29T04:00:00+08:00', monitorValue: '220.55' },
    { monitorTime: '2024-12-29T05:00:00+08:00', monitorValue: '220.30' },
    { monitorTime: '2024-12-29T06:00:00+08:00', monitorValue: '220.50' },
    { monitorTime: '2024-12-29T07:00:00+08:00', monitorValue: '220.40' },
    { monitorTime: '2024-12-29T08:00:00+08:00', monitorValue: '220.45' },
    { monitorTime: '2024-12-29T09:00:00+08:00', monitorValue: '220.35' },
    { monitorTime: '2024-12-29T10:00:00+08:00', monitorValue: '220.50' },
    { monitorTime: '2024-12-29T11:00:00+08:00', monitorValue: '220.40' },
    { monitorTime: '2024-12-29T12:00:00+08:00', monitorValue: '220.45' },
  ],
  '重庆医科大生物工程学院办公室1楼1-1_故障电弧探测器': [
    { monitorTime: '2024-12-29T00:00:00+08:00', monitorValue: '0' },
    { monitorTime: '2024-12-29T01:00:00+08:00', monitorValue: '1' },
    { monitorTime: '2024-12-29T02:00:00+08:00', monitorValue: '0' },
    { monitorTime: '2024-12-29T03:00:00+08:00', monitorValue: '1' },
    { monitorTime: '2024-12-29T04:00:00+08:00', monitorValue: '0' },
    { monitorTime: '2024-12-29T05:00:00+08:00', monitorValue: '1' },
    { monitorTime: '2024-12-29T06:00:00+08:00', monitorValue: '0' },
    { monitorTime: '2024-12-29T07:00:00+08:00', monitorValue: '1' },
    { monitorTime: '2024-12-29T08:00:00+08:00', monitorValue: '0' },
    { monitorTime: '2024-12-29T09:00:00+08:00', monitorValue: '1' },
    { monitorTime: '2024-12-29T10:00:00+08:00', monitorValue: '0' },
    { monitorTime: '2024-12-29T11:00:00+08:00', monitorValue: '1' },
    { monitorTime: '2024-12-29T12:00:00+08:00', monitorValue: '0' },
  ],
  '重庆医科大生物工程学院办公室1楼1-1_温度传感器': [
    { monitorTime: '2024-12-29T00:00:00+08:00', monitorValue: '18.00' },
    { monitorTime: '2024-12-29T01:00:00+08:00', monitorValue: '17.80' },
    { monitorTime: '2024-12-29T02:00:00+08:00', monitorValue: '17.90' },
    { monitorTime: '2024-12-29T03:00:00+08:00', monitorValue: '18.10' },
    { monitorTime: '2024-12-29T04:00:00+08:00', monitorValue: '18.00' },
    { monitorTime: '2024-12-29T05:00:00+08:00', monitorValue: '18.20' },
    { monitorTime: '2024-12-29T06:00:00+08:00', monitorValue: '18.10' },
    { monitorTime: '2024-12-29T07:00:00+08:00', monitorValue: '18.00' },
    { monitorTime: '2024-12-29T08:00:00+08:00', monitorValue: '18.20' },
    { monitorTime: '2024-12-29T09:00:00+08:00', monitorValue: '18.10' },
    { monitorTime: '2024-12-29T10:00:00+08:00', monitorValue: '18.00' },
    { monitorTime: '2024-12-29T11:00:00+08:00', monitorValue: '18.20' },
    { monitorTime: '2024-12-29T12:00:00+08:00', monitorValue: '18.10' },
  ],
  '重庆医科大生物工程学院办公室1楼1-1电气温度传感器': [
    { monitorTime: '2024-12-29T00:00:00+08:00', monitorValue: '20.00' },
    { monitorTime: '2024-12-29T01:00:00+08:00', monitorValue: '19.90' },
    { monitorTime: '2024-12-29T02:00:00+08:00', monitorValue: '20.10' },
    { monitorTime: '2024-12-29T03:00:00+08:00', monitorValue: '20.00' },
    { monitorTime: '2024-12-29T04:00:00+08:00', monitorValue: '20.20' },
    { monitorTime: '2024-12-29T05:00:00+08:00', monitorValue: '19.80' },
    { monitorTime: '2024-12-29T06:00:00+08:00', monitorValue: '20.00' },
    { monitorTime: '2024-12-29T07:00:00+08:00', monitorValue: '20.10' },
    { monitorTime: '2024-12-29T08:00:00+08:00', monitorValue: '20.00' },
    { monitorTime: '2024-12-29T09:00:00+08:00', monitorValue: '20.05' },
    { monitorTime: '2024-12-29T10:00:00+08:00', monitorValue: '20.00' },
    { monitorTime: '2024-12-29T11:00:00+08:00', monitorValue: '20.10' },
    { monitorTime: '2024-12-29T12:00:00+08:00', monitorValue: '20.00' },
  ],
}
const graphData = ref('')
// 监听下拉框选择变化
watch(selectedSensor, async (newValue) => {
  if (newValue) {
    console.log('历史数据参数：', selectedMonitorType.value, ' ', device.deviceID)
    try {
      // 模拟向接口发送数据
      const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/hik/business/queryDeviceToSensorHistoryMonitorList', {
        sensorID: '1065998578681106434', // selectedMonitorType.value,
        deviceID: '1065998578609803264', // device.deviceID,
        startTime: '2024-12-16T00:00:00.000+08:00',
        endTime: '2024-12-17T23:59:59.000+08:00',
        pageNum: 1,
        pageSize: 10,
      })
      console.log('接口返回数据：', response.data.data)
      // graphData.value = response.data.data.historyMonitor.historyMonitorDataList
      // initChart()
      const graph = simulatedData[selectedSensor.value]
      initChart1(graph)
    }
    catch (error) {
      console.error('接口错误：', error)
    }
  }
})

onMounted(() => {
  // 初始化近一周日期
  generateWeekDates()
  fetchData()
  fetchGraphData()
  fetchSensorData()
  const graph = simulatedData[selectedSensor.value]
  initChart1(graph)
})
</script>

<template>
  <div class="baseInfo">
    <!-- <div class="header">
      <el-radio-group v-model="selectedDate" size="large" class="date-selector">
        <el-radio-button v-for="(date, index) in weekDates" :key="index" :label="date">
          {{ date }}
        </el-radio-button>
      </el-radio-group>
    </div> -->
    <div style="display: flex; width: 100%;height: 50px;margin: 10px;border-bottom: 2px solid #ebebeb;">
      <h3>基本信息</h3>
    </div>
    <div class="device-info">
      <div class="device-header">
        <h3>{{ device.deviceName }}</h3>
        <div>
          <el-tag v-if="device.deviceStatus === '在线'" type="success" class="status-tag">
            在线
          </el-tag>
          <el-tag v-if="device.unitStatus === '正常'" type="info" class="status-tag">
            正常
          </el-tag>
        </div>
      </div>
      <div class="device-details">
        <div class="device-details-column">
          <span>序列号</span><span>{{ device.deviceSerial }}</span>
        </div>
        <div class="device-details-column">
          <span>设备类型：</span><span>{{ device.deviceType }}</span>
        </div>
        <div class="device-details-column">
          <span>设备型号：</span><span>{{ device.deviceModel }}</span>
        </div>
        <div class="device-details-column">
          <span>详细位置：</span><span>{{ device.location }}</span>
        </div>
        <div class="device-details-column">
          <span>上报时间：</span><span>{{ device.createTime }}</span>
        </div>
      </div>
    </div>
    <div class="multiDataBlock">
      <div v-for="(data, index) in dataBlocks" :key="index" class="dataBlock">
        <h4>{{ data.monitorType }}</h4>
        <el-tag v-if="data.monitorState === '正常'" type="success" class="status-tag">
          正常
        </el-tag>
        <p>{{ data.monitorValue }}{{ data.monitorUnit }}</p>
        <p>{{ data.sensorType }}</p>
      </div>
    </div>
    <!-- <el-select v-model="selectedMonitorType" placeholder="请选择监测类型" style="width: 200px">
      <el-option
        v-for="item in filteredMonitorTypes"
        :key="item.sensorID"
        :label="item.sensorName"
        :value="item.sensorID"
      ></el-option>
    </el-select> -->
    <el-select v-model="selectedSensor" placeholder="请选择监测类型" style="width: 450px;">
      <el-option v-for="sensor in sensors" :key="sensor" :value="sensor">
        {{ sensor }}
      </el-option>
    </el-select>
    <div id="chart" style="width: 100%; height: 400px;" />
  </div>
</template>

<style scoped>
.baseInfo {
  width: 100%;
  height: auto;
}

.header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 20px 0;
  border-bottom: 2px solid #ebebeb;
}

.date-selector {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.el-radio-button {
  width: auto;
  height: auto;
  padding: 0;
  margin-right: 10px;
  font-size: 14px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
}

.el-radio-button__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 50%;
}

.device-info {
  display: flex;
  padding: 10px;
  border-bottom: 2px solid #ebebeb;
}

.device-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.device-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.status-tag {
  font-size: 12px;
}

.device-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
  margin-left: 10px;

  /* margin-top: 10px; */
}

.device-details-column {
  display: flex;
  flex-flow: column wrap;
  gap: 15px;
  margin-top: 10px;
}

.device-details span {
  font-size: 14px;
  color: #666;
}

.multiDataBlock {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  border-bottom: 2px solid #ebebeb;

  /* 数据块之间的间距 */
}

.dataBlock {
  flex: 0 0 calc(10% - 15px);
  padding: 15px;
  text-align: center;

  /* 每行 5 个数据块，减去间距 */
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.dataBlock h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #333;
}

.dataBlock p {
  margin: 0;
  font-size: 14px;
  color: #666;
}
</style>
